<div id="app">
    <section class="content-header">
        <h1>
            <small>商品图片编辑</small>
        </h1>

    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <div class="box-tools">
                            <div class="btn-group pull-right" style="margin-right: 5px">
                                <a style="margin:0px 5px;" href="/admin/goods/goodsEdit?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="商品编辑"> <span class="hidden-xs">商品编辑</span></a>

                                <a style="margin:0px 5px;" href="/admin/goods/goodsAttr?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="规格"> <span class="hidden-xs">规格</span></a>
                                <a style="margin:0px 5px;" href="/admin/goods/sku?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="属性"> <span class="hidden-xs">属性</span></a>

                                 <a style="margin:0px 5px;" href="/admin/goods/goodsLease?goods_id={{$goods['goods_id']}}}" class="btn btn-sm btn-default" title="租期"> <span class="hidden-xs">租期</span></a>
                            </div>
                        </div>




                        <span>
    <a class="btn btn-sm btn-primary grid-refresh" title="刷新"><i class="fa fa-refresh"></i><span class="hidden-xs"> 刷新</span></a>
    <a class="btn btn-sm btn-primary" onclick="javascript:history.go(-1);" title="返回"> <span class="hidden-xs"> 返回</span></a>
  </span>
                    </div>

                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <thead >
                            </thead>
                            <tr>
                                <td style="text-align: center;">商品图片</td>
                                <td>
                                   <div>
                                       <img data-action="zoom" width="300" src="{{$url}}{{ $goods['goods_img_list'] }}" />
                                       <button data-id="0" data-good="{{$goods['goods_id']}}" data-type="goods_img_list" class="imgdel">删除</button>
                                       <button class="imgedit" data-id="0" data-good="{{$goods['goods_id']}}" data-type="goods_img_list"  >编辑</button>
                                   </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">订单缩略图</td>
                                <td>
                                    <div>
                                        <img data-action="zoom" width="300" src="{{$url}}{{ $goods['goods_order_thumbnail'] }}"  />

                                        <button data-id="0" data-good="{{$goods['goods_id']}}" data-type="goods_order_thumbnail" class="imgdel">删除</button>
                                        <button data-id="0" data-good="{{$goods['goods_id']}}" data-type="goods_order_thumbnail"  class="imgedit">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">商品轮播图</td>
                                <td>
                                    @if($img)
                                        @foreach($img as $v)
                                            @if($v['img_type']==1)
                                                <div style="margin-bottom: 5px;">
                                                    <img data-action="zoom" width="300" src="{{$url}}{{$v['img_src']}}"  />
                                                    <button data-id="{{$v['img_id']}}" data-good="{{$goods['goods_id']}}" data-type="" class="imgdel">删除</button>
                                                    <button data-id="{{$v['img_id']}}" data-good="{{$goods['goods_id']}}" data-type=""  class="imgedit">编辑</button>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <td style="text-align: center;">商品详情图</td>
                                <td>
                                    @if($img)
                                        @foreach($img as $v)
                                            @if($v['img_type']==2)
                                                <div style="margin-bottom: 5px;">
                                                    <img data-action="zoom" width="300" src="{{$url}}{{$v['img_src']}}"  />
                                                    <button data-id="{{$v['img_id']}}" data-good="{{$goods['goods_id']}}" data-type="" class="imgdel">删除</button>
                                                    <button data-id="{{$v['img_id']}}" data-good="{{$goods['goods_id']}}" data-type="" class="imgedit">编辑</button>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>

                    <input data-id="0" data-goods="0" data-type="" type="file" style="display:none;" onchange="upimg(this)" name="img" id="upImg">

                    <!-- /.box-header -->
                    <!-- form start -->

                    <form id="addForm"  accept-charset="UTF-8" class="form-horizontal"  style="margin-top:30px;">
                        <div class="box-body">
                            <div class="fields-group">

                                <div class="form-group  ">
                                    <label for="img" class="col-sm-2  control-label">添加图片</label>
                                    <div class="col-sm-8">
                                        <input type="file" class="img" name="img"    />
                                    </div>
                                </div>
                                <div class="form-group  ">
                                    <label for="goods_img_list" class="col-sm-2  control-label">图片类型</label>
                                    <div class="col-sm-8">
                                        <select class="form-control img_type" style="width: 50%;" name="img_type" data-value="" >
                                            <option value="2">商品详情图</option>
                                            <option value="1">商品轮播图</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            @csrf
                            <input type="hidden" name="goods_id" value="{{$goods['goods_id']}}">
                            <input type="hidden" name="action" value="add">
                            <div class="col-md-2">
                            </div>
                            <div class="col-md-8">
                                <div class="btn-group pull-left">
                                    <button type="button" onclick="tijiao()" class="btn btn-primary">上传</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div></div>
    </section>
</div>
<script data-exec-on-popstate>
    var s='';
    $(function(){
        //刷新
        $('.grid-refresh').on('click', function() {
            $.pjax.reload('#pjax-container');
            toastr.success('刷新成功 !');
        });

        $('.imgedit').click(function(e){
            $("#upImg").attr('data-good',$(this).attr('data-good'));
            $("#upImg").attr('data-id',$(this).attr('data-id'));
            $("#upImg").attr('data-type',$(this).attr('data-type'));
            console.log($(this).attr('data-good'));
            $("#upImg").click();
            s=$(this);
        });
        $("input.img").fileinput({
            "overwriteInitial":false,
            "initialPreviewAsData":true,
            "browseLabel":"浏览",
            "showRemove":false,
            "showUpload":false,
            "dropZoneEnabled":false,
            "allowedFileTypes":["image"]});

        $('.imgdel').click(function(e){

            var id=$(this).attr('data-id');
            var goods_id=$(this).attr('data-good');
            var type=$(this).attr('data-type');
            var b=$(this);

            var data=new FormData();
            data.append('id',id);
            data.append('goods_id',goods_id);
            data.append('type',type);
            data.append('_token',LA.token);

            if(confirm('确定要删除吗？')){

                $.ajax({
                    url:'/admin/goods/goodsDeleteImg',
                    data:data,
                    type:'post',
                    dataType:'json',
                    contentType:false,
                    processData:false,
                    success:function (m) {
                        if(m.status==1){
                            toastr.success(m.message);
                            if(id>0){
                                $(b).parent().remove();
                            }else{
                                $(b).parent().find("img").attr('src','');
                            }

                        }else{
                            toastr.error(m.message);
                        }
                    }
                });
            }

        });
    })
    function upimg(e){
        var id=$(e).attr('data-id');
        var goods_id=$(e).attr('data-good');
        var type=$(e).attr('data-type');
        var file=e.files[0];

        var data=new FormData();
        data.append('img',file);
        data.append('id',id);
        data.append('goods_id',goods_id);
        data.append('type',type);
        data.append('action','update');
        data.append('_token',LA.token);
        $.ajax({
            url:'/admin/goods/goodsAddImg',
            data:data,
            type:'post',
            dataType:'json',
            contentType:false,
            processData:false,
            success:function (m) {
                if(m.status==1){
                    toastr.success(m.message);
                    $(s).parent().find("img").attr('src',m.data.url);
                }else{
                    toastr.error(m.message);
                }
            }
        });

    }
    function tijiao(){
        var data=new FormData($("#addForm")[0]);
        $.ajax({
            url:"/admin/goods/goodsAddImg",
            type:'post',
            data:data,
            dataType:'json',
            processData: false,
            contentType: false,
            success:function(m){
                //toastr.error(m.message);
                if(m.status==1){
                    toastr.success(m.message);
                    window.location.reload();
                }else{
                    toastr.error(m.message);
                }
            }
        });
    }
</script>


<script src="/js/zoom.js"></script>